<!--
 * @Description: 砂模板
 * @Autor: yjx
 * @Date: 2021-11-17 16:31:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-30 14:19:46
-->
<template>
    <div id="template5" class="template_table_parent">
        <table class="template_table" border="1" cellpadding="0" cellspacing="0" @click="example">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>检测编号：</td>
                <td class="bg5" colspan="3"></td>
            </tr>
            <tr>
                <td>委托单位</td>
                <td class="bg5" colspan="4"></td>
                <td>品 种</td>
                <td class="bg5" colspan="2"></td>
                <td>工程名称</td>
                <td class="bg5" colspan="2"></td>
                <td>取样日期</td>
                <td class="bg3 select_date" colspan="3">
                    <el-date-picker
                        v-model="tableData.qysj"
                        format="HH:mm"
                        value-format="timestamp"
                        type="datetime">
                    </el-date-picker>
                </td>
            </tr>
            <tr>
                <td>检测单位</td>
                <td class="bg5" colspan="4"></td>
                <td>规 格</td>
                <td class="bg5" colspan="2"></td>
                <td>环境湿度</td>
                <td class="bg6" colspan="2"></td>
                <td>试验日期</td>
                <td class="bg3" colspan="3"> </td>
            </tr>
            <tr>
                <td>生产厂家</td>
                <td class="bg5" colspan="4"></td>
                <td>产 地</td>
                <td class="bg5" colspan="2"></td>
                <td>环境温度</td>
                <td class="bg6" colspan="2"></td>
                <td>检验依据</td>
                <td class="bg4" colspan="3"></td>
            </tr>
            <tr>
                <td rowspan="3">进场验收项目</td>
                <td rowspan="2">颜色对比</td>
                <td colspan="2">石粉含量（%）</td>
                <td rowspan="2" colspan="2">含泥量（天然砂）（%）</td>
                <td rowspan="2" colspan="2">泥块含量</td>
                <td rowspan="2">细度模数（uf）</td>
                <td rowspan="2" colspan="2">颗粒级配</td>
                <td rowspan="2" colspan="2">含石量（%）</td>
                <td rowspan="2" colspan="2">含水率（%）</td>
            </tr>
            <tr>
                <td>MB值＜1.4</td>
                <td>MB值≥1.4</td>
            </tr>
            <tr>
                <td class="bg5 red" attrName="kjysdb" setType="select">{{tableData.kjysdb && tableData.kjysdb.hgbz && tableData.kjysdb.hgbz.label || '待配置'}}</td>
                <td class="bg5 red" attrName="kjsfhllt" setType="input">{{tableData.kjsfhllt && tableData.kjsfhllt.hgbz || '待配置'}}</td>
                <td class="bg5 red" attrName="kjsfhlgt" setType="input">{{tableData.kjsfhlgt && tableData.kjsfhlgt.hgbz || '待配置'}}</td>
                <td class="bg5 red" colspan="2" attrName="kjhnl" setType="input">{{tableData.kjhnl && tableData.kjhnl.hgbz|| '待配置'}}</td>
                <td class="bg5 red" colspan="2" attrName="kjnkhl" setType="select">{{tableData.kjnkhl && tableData.kjnkhl.hgbz && tableData.kjnkhl.hgbz.label || '待配置'}}</td>
                <td class="bg5 red" attrName="kjxdms" setType="input">{{tableData.kjxdms && tableData.kjxdms.hgbz || '待配置'}}</td>
                <td class="bg5 red" colspan="2" attrName="kjkljp" setType="input">{{tableData.kjkljp && tableData.kjkljp.hgbz || '待配置'}}</td>
                <td class="bg5 red" colspan="2" attrName="kjhshil" setType="input">{{tableData.kjhshil && tableData.kjhshil.hgbz || '待配置'}}</td>
                <td class="bg5 red" colspan="2" attrName="kjhshuil" setType="input">{{tableData.kjhshuil && tableData.kjhshuil.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td colspan="2">试样重量（g）</td>
                <td class="4"></td>
                <td colspan="3">10mm筛筛余量（g）</td>
                <td class="2" colspan="2"></td>
                <td colspan="3">10mm以上粒径含量（%）</td>
                <td colspan="4"></td>
            </tr>
            <tr>
                <td rowspan="4">堆积密度</td>
                <td rowspan="2">（样+筒）（g）</td>
                <td rowspan="2">筒重（g）</td>
                <td rowspan="2">筒容积（L）</td>
                <td rowspan="2">密度值（kg/m³）</td>
                <td rowspan="2">平均值（kg/m³）</td>
                <td rowspan="2">试验用量</td>
                <td rowspan="2" colspan="3">第一次样重=500g</td>
                <td rowspan="2" colspan="3">第er次样重=500g</td>
                <td rowspan="5">分计筛余百分率平均值（%）</td>
                <td rowspan="5">累计筛余百分率平均值（%）</td>
            </tr>
            <tr></tr>
            <tr>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td></td>
                <td class="bg1" rowspan="2" attrName="djmdpjz" setType="input">{{tableData.djmdpjz && tableData.djmdpjz.hgbz || '待配置'}}</td>
                <td rowspan="3">筛孔尺寸</td>
                <td rowspan="3">分计筛余量（g）</td>
                <td rowspan="3">分计筛余百分率（%）</td>
                <td rowspan="3">累计筛余百分率（%）</td>
                <td rowspan="3">分计筛余量（g）</td>
                <td rowspan="3">分计筛余百分率（%）</td>
                <td rowspan="3">累计筛余百分率（%）</td>
            </tr>
            <tr>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="4">表观密度</td>
                <td rowspan="2">样重（g）</td>
                <td rowspan="2">（瓶+水）（g）</td>
                <td rowspan="2">（样+瓶+水）（g）</td>
                <td rowspan="2">密度值（kg/m³）</td>
                <td rowspan="2">平均值（kg/m³）</td>
            </tr>
            <tr>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td></td>
                <td class="bg1" rowspan="2" attrName="bgmdpjz" setType="input">{{tableData.bgmdpjz && tableData.bgmdpjz.hgbz || '待配置'}}</td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>空隙率（%）</td>
                <td colspan="5"></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="4">含泥量</td>
                <td>洗前干重（g）</td>
                <td>洗后干重（g）</td>
                <td>含泥量（%）</td>
                <td colspan="2">平均值（%）</td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td></td>
                <td class="bg1" colspan="2" rowspan="2" attrName="hnlpjz" setType="input">{{tableData.hnlpjz && tableData.hnlpjz.hgbz || '待配置'}}</td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td class="bg3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="3">泥块含量</td>
                <td>洗前干重（g）</td>
                <td>洗后干重（g）</td>
                <td>泥块含量（%）</td>
                <td colspan="2">平均值（%）</td>
                <td rowspan="4">细度模数（uf）</td>
                <td>uf1=</td>
                <td colspan="2"></td>
                <td colspan="2" rowspan="2">细度模数平均值（uf）</td>
                <td class="bg1" colspan="3" rowspan="2" attrName="xdmspjz" setType="input">{{tableData.xdmspjz && tableData.xdmspjz.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td class="bg6"></td>
                <td class="bg6"></td>
                <td></td>
                <td class="bg1" colspan="2" rowspan="2" attrName="nkhlpjz" setType="input">{{tableData.nkhlpjz && tableData.nkhlpjz.hgbz || '待配置'}}</td>
                <td>uf2=</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td class="bg6"></td>
                <td class="bg6"></td>
                <td></td>
                <td rowspan="2">uf1-uf2=</td>
                <td rowspan="2" colspan="2"></td>
                <td rowspan="2">含石量（%）</td>
                <td>第一次</td>
                <td>第二次</td>
                <td colspan="2">平均值</td>
            </tr>
            <tr>
                <td rowspan="2">亚甲蓝试验</td>
                <td>样重（g）</td>
                <td colspan="2">亚甲蓝溶液（ml）</td>
                <td colspan="2">测定值</td>
                <td class="bg3"></td>
                <td class="bg3"></td>
                <td class="bg1" colspan="2" attrName="hslpjz" setType="input">{{tableData.hslpjz && tableData.hslpjz.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td class="bg6"></td>
                <td class="bg6" colspan="2"></td>
                <td class="bg1" colspan="2" attrName="yjlsycdz" setType="input">{{tableData.yjlsycdz && tableData.yjlsycdz.hgbz || '待配置'}}</td>
                <td rowspan="2">级配判定</td>
                <td class="bg1" colspan="2" rowspan="2" attrName="jppd" setType="select">{{tableData.jppd && tableData.jppd.hgbz && tableData.jppd.hgbz.label || '待配置'}}</td>
                <td rowspan="2">备 注</td>
                <td colspan="5" rowspan="2"></td>
            </tr>
            <tr>
                <td colspan="2">总压碎值指标（%）</td>
                <td class="bg6" colspan="4"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>审核：</td>
                <td class="bg5" colspan="3"></td>
                <td></td>
                <td></td>
                <td></td>
                <td>试验：</td>
                <td class="bg5" colspan="3"></td>
                <td></td>
                <td></td>
            </tr>
        </table>

        <SetStandardDialog :visible.sync="setStandardVisible" :config="setStandardConfig" @updated="setData"/>
    </div>
</template>
<script>
import SetStandardDialog from './SetStandardDialog'

const ARR = [
    { key: 'kjysdb', title: '颜色对比', category: 7, type: 1, code: 'cell_13', verify: '请配置颜色对比', options: [{value: 0, label: '相邻批次一致'}, {value: 1, label: '相邻批次不一致'}]},
    { key: 'kjsfhllt', title: '石粉含量', category: 7, type: 2, code: 'cell_14', verify: '请配置石粉含量'},
    { key: 'kjsfhlgt', title: '石粉含量', category: 7, type: 2, code: 'cell_15', verify: '请配置石粉含量'},
    { key: 'kjhnl', title: '含泥量', category: 7, type: 2, code: 'cell_16', verify: '请配置含泥量'},
    { key: 'kjnkhl', title: '泥块含量', category: 7, type: 1, code: 'cell_17', verify: '请配置泥块含量', options: [{ value: 0, label: '目测无' }, { value: 1, label: '目测有' }]},
    { key: 'kjxdms', title: '细度模数', category: 7, type: 2, code: 'cell_18', verify: '请配置细度模数'},
    { key: 'kjkljp', title: '颗粒级配', category: 7, type: 1, code: 'cell_19', verify: '请配置颗粒级配', options: [{ value: 0, label: '合格' }, { value: 1, label: '不合格' }]},
    { key: 'kjhshil', title: '含石量', category: 7, type: 2, code: 'cell_20', verify: '请配置含石量'},
    { key: 'kjhshuil', title: '含水量', category: 7, type: 2, code: 'cell_21', verify: '请配置含水量'},
    { key: 'djmdpjz', title: '堆积密度平均值', category: 1, type: 2, code: 'cell_33', verify: '请配置堆积密度平均值'},
    { key: 'bgmdpjz', title: '表观密度平均值', category: 1, type: 2, code: 'cell_42', verify: '请配置表观密度平均值'},
    { key: 'hnlpjz', title: '含泥量平均值', category: 1, type: 2, code: 'cell_49', verify: '请配置含泥量平均值'},
    { key: 'nkhlpjz', title: '泥块含量平均值', category: 1, type: 2, code: 'cell_56', verify: '请配置泥块含量平均值'},
    { key: 'xdmspjz', title: '细度模数平均值', category: 1, type: 2, code: 'cell_129', verify: '请配置细度模数平均值'},
    { key: 'hslpjz', title: '含石量平均值', category: 1, type: 2, code: 'cell_133', verify: '请配置含石量平均值'},
    { key: 'yjlsycdz', title: '亚甲蓝实验测定值', category: 1, type: 2, code: 'cell_59', verify: '请配置亚甲蓝实验测定值'},
    { key: 'jppd', title: '级配判定', category: 1, type: 1, code: 'cell_134', verify: '请配置级配判定', options: [{ value: 0, label: '合格' }, { value: 1, label: '不合格' }]},
]

export default {
    components: {
        SetStandardDialog, // 设置标准
    },
    props: {
        templateData: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            setStandardConfig: {},
            setStandardVisible: false,
            tableData: {},
        }
    },
    created() {
        const obj = {};
        for(let i = 0; i < ARR.length; i++) {
            obj[ARR[i].key] = {}
        }
        this.tableData = obj
        if(this.templateData) {
            this.tableData = this.templateData
        }
    },
    watch: {
        templateData: {
            deep: true,
            handler: function() {
                if(this.templateData) {
                    this.tableData = this.templateData
                } else {
                    const obj = {};
                    for(let i = 0; i < ARR.length; i++) {
                        obj[ARR[i].key] = {}
                    }
                    this.tableData = obj
                }
            },
        },
    },
    methods: {
        // 格式化数据
        fData(data) {
            if(data && data['hgbz']) {
                let type = null;
                if(Array.isArray(data['hgbz'])) type = 'input'
                if(!Array.isArray(data['hgbz'])) type = 'select'
                if(typeof data['hgbz'] === 'string') type = 'popup'
                if(type === 'input') {
                    const arr = ['合格标准', '相邻波动', '异常标准1', '异常标准2'];
                    return JSON.stringify(Object.values(data).map((item, i)=>({code: i + 1, iteam: arr[i+1], min: item[0], max: item[1], format: i === 0 ? 1 : 2})))
                } else if(type === 'select') {
                    return JSON.stringify({id: data.hgbz.value, value: data.hgbz.label})
                } else if(type === 'popup'){
                    return data.hgbz
                } else {
                    return ''
                }
            } else {
                return ''
            }
            
        },
        example(e) {
            // 事件委托，根据属性判断是否可以点击
            const target = e.target
            const key = target.getAttribute('attrName')
            const type = target.getAttribute('setType')
            if (key && type) {
                this.setStandard(key, type)
            }
        },
        setStandard(key, type) {
            // 设置标准
            // key 要设置的属性名
            // type 类型 input输入框 select下拉框
            if (type === 'input' || type === 'select') {
                this.setStandardConfig = {
                    key,
                    type,
                    data: this.tableData[key],
                }
                if(type === 'select') {
                    this.setStandardConfig.options = ARR.filter(item=>item.key === key)[0].options
                }
                this.setStandardVisible = true
            }
        },
        setData(data) {
            // 自定义事件的回调，设置表格属性
            if (!data.type) return
            this.tableData[data.key] = data.data;

        },
        getData() {
            for(let i = 0; i < ARR.length; i++) {
                if(!this.tableData[ARR[i].key].hgbz) {
                    this.$message.info('请配置' + ARR[i].title);
                    return false;
                }
            }
            const data = {};
            for (let i = 0; i < ARR.length; i++) {
                data[ARR[i].code] = {
                    title: ARR[i].title,
                    category: ARR[i].category,
                    type: ARR[i].type,
                    condition: this.fData(this.tableData[ARR[i].key]),
                    options: ARR[i].options ? JSON.stringify(ARR[i].options.map(item=>({id: item.value, value: item.label}))) : '',
                    resultValue: ''
                }
            }
            // 暴露自身表格数据的方法，父组件通过$refs调用
            return { data, tableData: this.tableData }
        },
    },
}
</script>
<style lang="scss" scoped>
#template1 {
    width: 1200px;
}
$td_width: 100px;
$td_height: 36px;
.params_template {
    width: 100%;
    margin-top: 20px;
    .top {
        display: flex;
        margin-left: 20px;
        .params_type {
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item {
                width: 33%;
                margin-bottom: 16px;
                display: flex;
                .item_color {
                    width: 28px;
                    height: 22px;
                    margin-right: 10px;
                }
                .item_text {
                    font-weight: 400;
                }
            }
        }
        .btn {
            width: 350px;
        }
    }
    .template_content {
        width: 100%;
        height: 430px;
        overflow: auto;
    }
    .text {
        width: 100%;
        height: 500px;
        color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .template_table_parent {
        margin: 0 30px 20px 20px;
        table {
            border-collapse: collapse;
            border: 0 !important;
        }
        td {
            position: relative;
        }
        table,th,td{
            border: 1px solid black;
        }
        .el-date-table {
            table,th,td{
                border: 0;
            }
        }
        .bg1 { // 必检
            background: #ffff00;
            color: red;
            cursor: pointer;
        }
        .bg2 { // 选检
            background: #ffffcd;
            color: red;
            cursor: pointer;
        }
        .bg3 { // 必填
            background: #00b14b;
        }
        .bg4 { // 默认
            background: #8062a4;
        }
        .bg5 { // 系统带入
            background: #fdd5b2;
        }
        .bg6 { // 选填
            background: #90d246;
        }
        .text_color { // 业务数据及系统带入值默认颜色
            color: #777;
        }
        .red { // 配置项颜色
            color: red;
            cursor: pointer;
        }
        .template_table {
            .el-select__caret { // 下拉框的下拉箭头
                display: none;
            }
            .el-textarea__inner { // 文本域设置
                width: 100%;
                height: 100%;
                line-height: 36px;
                border: 0;
                outline: none;
                resize: none;
            }
            .el-input {
                width: 100%;
                text-align: center;
            }
            .el-input__inner {
                width: 100%;
                border: 0;
                border-radius: 0;
                background: transparent;
                color: #000;
                text-align: center;
            }
            .el-input__suffix {
                color: #000
            }
            input::-webkit-input-placeholder{
                color: #000;
            }
            .select_date {
                .el-input__inner {
                    width: 100%;
                    border: 0;
                    border-radius: 0;
                    background: transparent;
                    color: #000;
                    padding: 0 10px;
                    text-align: center;
                }
                .el-input__prefix {
                    display: none;
                }
            }
            tr:first-child, tr:last-child{
                td {
                    border: 0;
                }
            }
            td {
                width: $td_width;
                height: $td_height;
                text-align: center;
            }
        }
    }
    
}
</style>